<template>
	<view class="uiwu">
		<view class="item" v-for="(item,index) in listData" :key="index" @tap.stop="selectItem(item)">
			<view class="name">{{item.real_name}}<text>{{item.phone}}</text></view>
			<view class="detail">{{item.province}}{{item.city}}{{item.district}}{{item.detail}}</view>
			<view class="tbn uiwu-flex-space">
				<label class="radio" @tap="setDefault(item)">
					<radio color="#EF821E" @tap.stop="setDefault(item)" :checked="item.is_default == 1" value="1" /><text>设为默认</text>
				</label>
				<view class="right uiwu-flex-align">
					<view class="uiwu-flex-align" @tap.stop="editOpen(item)">
						<image src="/static/edit.png" mode="widthFix"></image>
						<text>编辑</text>
					</view>
					<view class="uiwu-flex-align" @tap.stop="TapDelelte(item,index)">
						<image src="/static/detle.png" mode="widthFix"></image>
						<text>删除</text>
					</view>
				</view>
			</view>
		</view>
		<uiwu-popup-model v-if="showModel" v-model="showModel" @confirm="confirmDelete">
			<text>确认删除该地址吗？</text>
		</uiwu-popup-model>
		<uiwu-footer>
			<view class="uiwu-footer">
				<navigator hover-class="none" url="/pages/user/addAddress" class="uiwu-footer-box uiwu-flex-center">+ 新增收货地址</navigator>
			</view>
		</uiwu-footer>
	</view>
</template>

<script setup lang="ts">
	import { onShow , onLoad } from '@dcloudio/uni-app';
	import { ref } from "vue";
	import { uiwu } from "@/config/config";
	import { addresslist, delAddress, setAddress } from '@/api/api';
	const showModel = ref<boolean>(false);
	const listData = ref<Array<object>>([]);
	const items = ref<object>({})
	const isSelect = ref(false);
	const TapDelelte = (item:object,index:number) : void => {
		items.value = item
		showModel.value = true
	}
	const confirmDelete = async () : Promise<any> => {
		const data = await delAddress({id:items.value.id});
		uiwu.toast('删除成功')
		showModel.value = false
		getListData()
	}
	const getListData = async () : void => {
		const { data } = await addresslist({});
		listData.value = data
	}
	/**
	 * 设置默认收货地址
	 */
	const setDefault = async ({id}) : Promise<any> => {
		await setAddress({id})
		uiwu.toast('设置成功')
		getListData()
	}
	const editOpen = (item:object) : void => {
		uni.navigateTo({
			url:`/pages/user/addAddress?data=${JSON.stringify(item)}`
		})
	}
	const selectItem = (item) : void =>{
		if(!isSelect.value) return
		uni.$emit('changeAddress',item)
		uni.navigateBack()
	}
	onLoad(({select})=>{
		isSelect.value = select ? true : false
	})
	onShow(()=>{
		getListData()
	})
</script>

<style lang="scss">
	page{
		background-color: #F6F6F6;
	}
	.uiwu{
		padding-top: 20rpx;
	}
	.item{
		background-color: #fff;
		padding: 24rpx 32rpx;
		margin-bottom: 20rpx;
		.name{
			font-size: 32rpx;
			font-weight: bold;
			color: #231815;
			text{
				font-size: 28rpx;
				font-weight: 500;
				margin-left: 20rpx;
			}
		}
		.detail{
			font-size: 28rpx;
			font-weight: 500;
			color: #666666;
			padding: 15rpx 0 24rpx;
			border-bottom: 1rpx solid #e6e6e6;
		}
		.tbn{
			.radio{
				radio{
					transform: scale(0.8);
				}
				text{
					font-size: 26rpx;
					font-weight: 500;
					color: #666666;
				}
			}
			.right{
				view{
					margin-left: 40rpx;
				}
				image{
					width: 32rpx; 
					margin-right: 4rpx;
				}
				text{
					font-size: 26rpx;
					font-weight: 500;
					color: #444444;
				}
			}
		}
	}
	.uiwu-footer{
		width: 100%;
		padding: 19rpx 32rpx 5rpx;
		background-color: #fff;
		&-box{
			width: 100%;
			height: 80rpx;
			background: #EF821E;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
